
<!--学生角色首页-->

<template>
	<view class="container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="golden-line line-1"></view>
			<view class="golden-line line-2"></view>
			<view class="golden-circle circle-1"></view>
			<view class="golden-circle circle-2"></view>
			<view class="golden-circle circle-3"></view>
		</view>

		<!-- 下拉刷新区域 -->
		<scroll-view
			class="scroll-container"
			scroll-y="true"
			refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<!-- 轮播广告 -->
			<view class="banner-section">
				<!-- 轮播图（当有数据时显示） -->
				<swiper v-if="bannerList.length > 0" class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
					<swiper-item v-for="(item, index) in bannerList" :key="index" @click="previewImage(item)">
						<image class="banner-image" :src="item.imageUrl" mode="aspectFill"></image>
						<view class="banner-overlay"></view>
					</swiper-item>
				</swiper>

				<!-- 空状态（当没有数据时显示） -->
				<view v-else class="empty-banner">
					<view class="empty-content">
						<view class="empty-icon">📸</view>
						<text class="empty-text">暂无轮播图数据</text>
						<text class="empty-subtitle">请通过管理端上传轮播图</text>
					</view>
				</view>
			</view>

			<!-- 用户信息卡片 -->
			<view class="user-card">
				<view class="card-glow"></view>
				<view class="user-info">
					<view class="avatar-container">
					<image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
						<view class="avatar-glow"></view>
					</view>
					<view class="user-details">
						<text class="username">{{ userInfo.studentName || '未登录' }}</text>
						<view class="user-badge">
						<text class="user-role">{{ userInfo.role === 1 ? '管理员' : '学生' }}</text>
						</view>
					</view>
				</view>

				<!-- 🆕 多班级课时显示 -->
				<view class="class-hours-section">
					<view class="section-title-mini">
						<text class="title-text">我的课时</text>
						<text class="total-hours">总计: {{ totalRemainingHours }}节</text>
					</view>


					<!-- 班级课时列表 -->
					<view v-if="classHoursList.length > 0" class="class-hours-list">
						<view v-for="(item, index) in classHoursList" :key="index" class="class-hours-item">
							<view class="class-info">
								<view class="class-name">{{ item.className }}</view>
								<view class="class-type">{{ getClassTypeText(item.classType) }}</view>
							</view>

							<!-- 添加课时详情 -->
							<view class="hours-details">
								<view class="detail-item">
									<text class="detail-label">总课时:</text>
									<text class="detail-number">{{ item.totalHours || 0 }}</text>
									<text class="detail-unit">节</text>
								</view>
								<view class="detail-item">
									<text class="detail-label">已使用:</text>
									<text class="detail-number">{{ item.usedHours || 0 }}</text>
									<text class="detail-unit">节</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 空状态 -->
					<view v-else class="empty-class-hours">
						<text class="empty-text">暂无课时数据</text>
						<text class="empty-hint">请联系管理员分配课时</text>
					</view>
				</view>
			</view>

			<!-- 快捷功能 -->
			<view class="quick-actions">
				<view class="section-header">
					<text class="section-title">快捷功能</text>
					<view class="title-divider"></view>
				</view>
				
				<!-- 功能卡片组 -->
				<view class="function-cards">
					<view class="function-card primary-card" @click="navigateTo('/pages/booking/booking')">
						<view class="card-glow"></view>
						<view class="card-content">
							<view class="card-icon-section">
								<view class="icon-ring booking-ring">
									<view class="icon-bg">
										<text class="card-icon">📅</text>
									</view>
								</view>
							</view>
							<view class="card-info">
								<text class="card-title">预约小课</text>
								<text class="card-subtitle">一对一个性化教学</text>
								<text class="card-desc">专业教师指导，提升学习效果</text>
							</view>
							<view class="card-action">
								<view class="action-btn">
									<text class="action-text">立即预约</text>
									<text class="action-arrow">→</text>
								</view>
							</view>
						</view>
					</view>

					<view class="function-card secondary-card" @click="navigateTo('/pages/course/course')">
						<view class="card-glow"></view>
						<view class="card-content">
							<view class="card-icon-section">
								<view class="icon-ring course-ring">
									<view class="icon-bg">
										<text class="card-icon">📚</text>
									</view>
								</view>
							</view>
							<view class="card-info">
								<text class="card-title">课程安排</text>
								<text class="card-subtitle">智能课程管理</text>
								<text class="card-desc">查看课程表，合理安排学习时间</text>
							</view>
							<view class="card-action">
								<view class="action-btn">
									<text class="action-text">查看课表</text>
									<text class="action-arrow">→</text>
								</view>
							</view>
						</view>
					</view>

					<view class="function-card accent-card" @click="navigateTo('/pages/recharge/recharge')">
						<view class="card-glow"></view>
						<view class="card-content">
							<view class="card-icon-section">
								<view class="icon-ring recharge-ring">
									<view class="icon-bg">
										<text class="card-icon">💰</text>
									</view>
								</view>
							</view>
							<view class="card-info">
								<text class="card-title">课时充值</text>
								<text class="card-subtitle">灵活充值方案</text>
								<text class="card-desc">购买课时包，享受更多优质课程</text>
							</view>
							<view class="card-action">
								<view class="action-btn">
									<text class="action-text">立即充值</text>
									<text class="action-arrow">→</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 底部服务入口 -->
			<view class="service-section">
				<view class="section-header">
					<text class="section-title">服务中心</text>
					<view class="title-divider"></view>
				</view>
				<view class="service-list">
					<view class="service-item" @click="navigateTo('/pages/help/help')">
						<view class="service-icon help-icon">
							<text class="icon-text">🛟</text>
						</view>
						<view class="service-content">
							<text class="service-text">帮助与支持</text>
							<text class="service-desc">客服咨询 · 关于我们 · 常见问题</text>
						</view>
						<view class="service-arrow">→</view>
					</view>
				</view>
			</view>

			<!-- 底部间距 -->
			<view class="bottom-space"></view>
		</scroll-view>
	</view>
</template>

<script>
import { getApiUrl, getRequestConfig, API_CONFIG, apiRequest } from '@/config/api.js'

export default {
	data() {
		return {
			userInfo: {
				studentName: '',
				role: 0,
				remainingHours: 0,
				avatarUrl: ''
			},
			bannerList: [],
			isRefreshing: false, // 控制下拉刷新的状态
			classHoursList: [], // 新增：存储班级课时列表
			totalRemainingHours: 0 // 新增：总剩余课时
		}
	},
	onLoad() {
		// 只加载API数据，不使用前端静态资源
		this.loadBannerData()
		this.loadUserInfo()
		this.loadClassHours() // 新增：加载班级课时数据
	},
	onShow() {
		// 每次显示页面时刷新用户信息
		this.loadUserInfo()
		this.loadClassHours() // 新增：刷新班级课时数据
	},
	methods: {
		async loadBannerData() {
			try {
				const token = uni.getStorageSync('token')

				const response = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.BANNER_LIST),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						...(token ? { 'Authorization': `Bearer ${token}` } : {})
					}
				})

				if (response.code === 200) {
					let apiBannerList = response.data || []

					// 处理图片URL，确保是完整的URL
					apiBannerList = apiBannerList.map(banner => {
						if (banner.imageUrl && !banner.imageUrl.startsWith('http')) {
							// 如果是相对路径，添加基础URL
							banner.imageUrl = getApiUrl('').replace('/api', '') + banner.imageUrl
						}
						return banner
					})

					// 设置轮播图数据
					this.bannerList = apiBannerList

					// 如果没有数据，显示提示
					if (this.bannerList.length === 0) {
						uni.showToast({
							title: '暂无轮播图数据',
							icon: 'none',
							duration: 2000
						})
					}
				} else {
					uni.showToast({
						title: response.message || '获取轮播图失败',
						icon: 'none',
						duration: 2000
					})
				}
			} catch (error) {
				// 检查是否是域名白名单错误
				if (error.errMsg && error.errMsg.includes('url not in domain list')) {
					uni.showModal({
						title: '网络配置提示',
						content: '请在微信开发者工具中开启"不校验合法域名"选项，或检查后端服务是否运行在localhost:8080',
						showCancel: false
					})
				} else {
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none',
						duration: 2000
					})
				}
			}
		},

		async loadUserInfo() {
			// 首先从本地存储获取基础用户信息
			const localUserInfo = uni.getStorageSync('userInfo')
			const token = uni.getStorageSync('token')

			if (!localUserInfo || !token) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return
			}

			// 设置基础用户信息
			this.userInfo = {
				studentName: localUserInfo.name || '未知用户',
				role: localUserInfo.role || 0,
				remainingHours: 0,
				avatarUrl: localUserInfo.avatarUrl || '/static/default-avatar.png'
			}

			try {
				// 从后端API获取最新的用户信息
				const userResponse = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.USER_INFO),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				if (userResponse.code === 200) {
					const userData = userResponse.data
					// 更新用户信息
					this.userInfo = {
						...this.userInfo,
						studentName: userData.name || localUserInfo.name || '未知用户',
						role: userData.role || localUserInfo.role || 0,
						avatarUrl: userData.avatarUrl || localUserInfo.avatarUrl || '/static/default-avatar.png'
					}
				}

			} catch (error) {
				// 如果API调用失败，至少显示本地存储的信息
				this.userInfo = {
					studentName: localUserInfo.name || '未知用户',
					role: localUserInfo.role || 0,
					remainingHours: 0, // 默认显示0课时
					avatarUrl: localUserInfo.avatarUrl || '/static/default-avatar.png'
				}

				// 显示错误提示
				uni.showToast({
					title: '加载用户信息失败',
					icon: 'none',
					duration: 2000
				})

				console.error('加载用户信息失败:', error)
			}
		},

		previewImage(item) {
			// 预览图片
			if (item.imageUrl) {
				uni.previewImage({
					urls: [item.imageUrl],
					current: item.imageUrl
				})
			}
		},

		navigateTo(url) {
			// 检查是否是tabbar页面
			const tabbarPages = [
				'/pages/index/index',
				'/pages/course/course',
				'/pages/booking/booking',
				'/pages/profile/profile'
			]

			if (tabbarPages.includes(url)) {
				uni.switchTab({
					url: url
				})
			} else {
				uni.navigateTo({
					url: url
				})
			}
		},

		async onRefresh() {
			this.isRefreshing = true

			try {
				// 并行加载数据
				await Promise.all([
					this.loadBannerData(),
					this.loadUserInfo(),
					this.loadClassHours() // 新增：刷新班级课时数据
				])

				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 1000
				})
			} catch (error) {
				uni.showToast({
					title: '刷新失败',
					icon: 'none',
					duration: 1000
				})
			} finally {
				// 延迟结束刷新状态，给用户更好的体验
				setTimeout(() => {
					this.isRefreshing = false
				}, 500)
			}
		},

		/**
		 * 🆕 新增：加载班级课时数据
		 */
		async loadClassHours() {
			try {
				const token = uni.getStorageSync('token')
				if (!token) {
					console.log('未找到token，无法获取课时信息')
					return
				}

				// 调用新的班级课时API获取学生课时信息
				const response = await apiRequest({
					url: getApiUrl(API_CONFIG.ENDPOINTS.CLASS_HOURS_MY),
					method: 'GET',
					header: {
						'Content-Type': 'application/json',
						'Authorization': `Bearer ${token}`
					}
				})

				console.log('API响应:', response)

				if (response.code === 200) {
					const data = response.data
					
					// 更新班级课时列表
					this.classHoursList = data.studentHours.map(hours => ({
						className: hours.className,
						classType: hours.classType,
						remainingHours: hours.remainingHours || 0,
						totalHours: hours.totalHours || 0,
						usedHours: hours.usedHours || 0
					}))

					// 更新总剩余课时
					this.totalRemainingHours = data.totalRemainingHours || 0

					// 更新用户信息中的剩余课时
					this.userInfo.remainingHours = data.totalRemainingHours || 0

					console.log('课时信息加载成功:', data)
					console.log('更新后的数据:', {
						userInfo: this.userInfo,
						classHoursList: this.classHoursList,
						totalRemainingHours: this.totalRemainingHours
					})
				} else {
					console.log('获取课时信息失败:', response.message)
					// 如果获取失败，显示空数据
					this.classHoursList = []
					this.totalRemainingHours = 0
					this.userInfo.remainingHours = 0
				}
			} catch (error) {
				console.error('获取班级课时失败:', error)
				// 获取失败时显示空数据
				this.classHoursList = []
				this.totalRemainingHours = 0
				this.userInfo.remainingHours = 0

				// 显示错误提示
				uni.showToast({
					title: '获取课时信息失败',
					icon: 'none',
					duration: 2000
				})
			}
		},

		/**
		 * 🆕 新增：获取班级类型文本
		 */
		getClassTypeText(classType) {
			const typeMap = {
				'COMPREHENSIVE': '综合班',
				'ADVANCED': '进阶班',
				'SPRINT': '冲刺班'
			}
			return typeMap[classType] || classType
		},

		/**
		 * 🆕 新增：调试信息
		 */
		showDebugInfo() {
			console.log('用户信息:', this.userInfo)
			console.log('班级课时列表:', this.classHoursList)
			console.log('总剩余课时:', this.totalRemainingHours)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 50%, #1E2332 100%);
	padding: 0;
	position: relative;
	overflow: hidden;
}

.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;

	.golden-line {
		position: absolute;
		background: linear-gradient(to right, #00B8D4, #1976D2);
		opacity: 0.3;
		filter: blur(10px);

		&.line-1 {
			width: 100%;
			height: 2px;
			top: 20%;
			left: 0;
		}

		&.line-2 {
			width: 100%;
			height: 2px;
			bottom: 20%;
			left: 0;
		}
	}

	.golden-circle {
		position: absolute;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.15) 0%, rgba(25, 118, 210, 0.15) 100%);
		filter: blur(10px);

		&.circle-1 {
			width: 200rpx;
			height: 200rpx;
			top: 10%;
			right: -50rpx;
		}

		&.circle-2 {
			width: 150rpx;
			height: 150rpx;
			top: 60%;
			left: -30rpx;
		}

		&.circle-3 {
			width: 100rpx;
			height: 100rpx;
			bottom: 20%;
			right: 20%;
		}
	}
}

.scroll-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2;
}

.banner-section {
	width: 100%;
	height: 400rpx;
	position: relative;
	margin-bottom: 20rpx;

	.banner-swiper {
		width: 100%;
		height: 100%;
		border-radius: 0 0 20rpx 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);

		.banner-image {
			width: 100%;
			height: 100%;
		}

		.banner-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
			z-index: 1;
		}
	}

	.empty-banner {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
		border-radius: 0 0 20rpx 20rpx;
		border: 1rpx solid rgba(0, 184, 212, 0.2);

		.empty-content {
			text-align: center;

			.empty-icon {
				font-size: 80rpx;
				margin-bottom: 20rpx;
				opacity: 0.5;
			}

			.empty-text {
				display: block;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.empty-subtitle {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}
	}
}

.user-card {
	margin: 30rpx 20rpx;
	padding: 30rpx;
	background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
	border-radius: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(25, 118, 210, 0.4);
	border: 2rpx solid rgba(0, 184, 212, 0.3);
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 50%);
		pointer-events: none;
	}

	.card-glow {
		position: absolute;
		top: -2rpx;
		left: -2rpx;
		right: -2rpx;
		bottom: -2rpx;
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.5), rgba(25, 118, 210, 0.5));
		border-radius: 22rpx;
		z-index: -1;
		filter: blur(4rpx);
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.avatar-container {
			position: relative;
			margin-right: 20rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
				border: 3rpx solid rgba(255, 255, 255, 0.4);
			}

			.avatar-glow {
				position: absolute;
				top: -4rpx;
				left: -4rpx;
				right: -4rpx;
				bottom: -4rpx;
				background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 70%);
				border-radius: 50%;
				z-index: -1;
				filter: blur(2rpx);
			}
		}

		.user-details {
			flex: 1;

			.username {
				display: block;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 8rpx;
				text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
			}

			.user-badge {
			.user-role {
					font-size: 22rpx;
					color: #FFFFFF;
					background: rgba(255, 255, 255, 0.15);
					padding: 6rpx 12rpx;
					border-radius: 12rpx;
					border: 1rpx solid rgba(255, 255, 255, 0.3);
					backdrop-filter: blur(10rpx);
				}
			}
		}
	}

	.class-hours-section {
		margin-top: 20rpx;
		padding: 20rpx 30rpx;
		background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
		border-radius: 16rpx;
		overflow: hidden;
		border: 1rpx solid rgba(0, 184, 212, 0.2);

		.section-title-mini {
		display: flex;
		justify-content: space-between;
		align-items: center;
			margin-bottom: 15rpx;

			.title-text {
				font-size: 32rpx;
				color: #00B8D4;
				font-weight: bold;
				background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				text-shadow: 0 0 10rpx rgba(0, 184, 212, 0.3);
			}

			.total-hours {
				font-size: 36rpx;
				color: #00B8D4;
				font-weight: bold;
				text-shadow: 0 0 20rpx rgba(0, 184, 212, 0.5);
			}
		}

		.recharge-reminder {
			display: flex;
			align-items: center;
			padding: 15rpx 20rpx;
			background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
			border-radius: 12rpx;
			margin-top: 15rpx;
			margin-bottom: 15rpx;
			border: 1rpx solid rgba(255, 152, 0, 0.3);
			box-shadow: 0 2rpx 8rpx rgba(255, 152, 0, 0.2);

			&.urgent {
				background: linear-gradient(135deg, #F44336 0%, #D32F2F 100%);
				border: 1rpx solid rgba(244, 67, 54, 0.3);
				box-shadow: 0 2rpx 8rpx rgba(244, 67, 54, 0.2);
			}

			.reminder-icon {
				font-size: 40rpx;
				margin-right: 15rpx;
				color: #FFFFFF;
			}

			.reminder-content {
				flex: 1;

				.reminder-title {
					font-size: 28rpx;
					color: #FFFFFF;
					font-weight: bold;
					margin-bottom: 5rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
				}

				.reminder-text {
					font-size: 22rpx;
					color: #FFFFFF;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
				}
			}

			.reminder-action {
				padding: 8rpx 15rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 1rpx solid rgba(0, 0, 0, 0.1);
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

				.action-text {
					font-size: 24rpx;
					color: #FF9800;
					font-weight: bold;
				}
			}
		}

		.class-hours-list {
			.class-hours-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15rpx 0;
				border-bottom: 1rpx solid rgba(0, 184, 212, 0.1);

				&:last-child {
					border-bottom: none;
				}

				.class-info {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.class-name {
						font-size: 28rpx;
						color: #FFFFFF;
						font-weight: 600;
						margin-bottom: 5rpx;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
					}

					.class-type {
						font-size: 22rpx;
						color: #AAB4BE;
						text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}
				}

				.hours-display {
					display: flex;
					align-items: baseline;

					.hours-number {
						font-size: 24rpx;
						color: #AAB4BE;
						font-weight: 500;
					}

					.hours-unit {
						font-size: 20rpx;
						color: rgba(255, 255, 255, 0.7);
						margin-left: 5rpx;
					}
				}
				.hours-details {
					margin-top: 10rpx;
					display: flex;
					flex-direction: column;
					gap: 8rpx;
					font-size: 20rpx;
					color: #AAB4BE;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);

					.detail-item {
						display: flex;
						align-items: baseline;
						gap: 6rpx;

						.detail-label {
							font-size: 20rpx;
							color: #AAB4BE;
							text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
							opacity: 0.8;
						}

						.detail-number {
							font-size: 24rpx;
							color: #00B8D4;
							font-weight: bold;
							text-shadow: 0 0 10rpx rgba(0, 184, 212, 0.3);
						}

						.detail-unit {
							font-size: 18rpx;
							color: #AAB4BE;
							text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
							opacity: 0.8;
						}
					}
				}
			}
		}

		.empty-class-hours {
			text-align: center;
			padding: 30rpx 0;

			.empty-text {
				font-size: 28rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 10rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}

			.empty-hint {
				font-size: 22rpx;
				color: #AAB4BE;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}
		}
	}
}

.quick-actions {
	margin: 30rpx 20rpx;

	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;

		.section-title {
			font-size: 32rpx;
			color: #00B8D4;
			font-weight: bold;
			background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-shadow: 0 0 10rpx rgba(0, 184, 212, 0.3);
		}

		.title-divider {
			flex: 1;
			height: 2rpx;
			background: linear-gradient(to right, transparent, #00B8D4, transparent);
			margin-left: 20rpx;
		}
	}

	.function-cards {
		display: flex;
		flex-direction: column;
		gap: 16rpx;

		.function-card {
			background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
			border-radius: 20rpx;
			padding: 24rpx 30rpx;
			border: 1rpx solid rgba(0, 184, 212, 0.2);
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
			min-height: 120rpx;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 8rpx 32rpx rgba(0, 184, 212, 0.3);
			}

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(135deg, rgba(0, 184, 212, 0.03) 0%, transparent 50%);
				border-radius: 20rpx;
				pointer-events: none;
			}

			.card-glow {
				position: absolute;
				top: -2rpx;
				left: -2rpx;
				right: -2rpx;
				bottom: -2rpx;
				background: linear-gradient(135deg, rgba(0, 184, 212, 0.3), rgba(25, 118, 210, 0.3));
				border-radius: 22rpx;
				z-index: -1;
				filter: blur(4rpx);
				opacity: 0.6;
			}

			.card-content {
				display: flex;
				align-items: center;
				width: 100%;
				position: relative;
				z-index: 1;
			}

			.card-icon-section {
				width: 70rpx;
				height: 70rpx;
				margin-right: 24rpx;
				position: relative;
				flex-shrink: 0;

				.icon-ring {
					position: absolute;
					top: -5rpx;
					left: -5rpx;
					right: -5rpx;
					bottom: -5rpx;
					border-radius: 50%;
					opacity: 0.3;

					&.booking-ring {
						background: radial-gradient(circle at center, #00B8D4, transparent 50%);
					}
					&.course-ring {
						background: radial-gradient(circle at center, #4cd964, transparent 50%);
					}
					&.recharge-ring {
						background: radial-gradient(circle at center, #e91e63, transparent 50%);
					}
				}

				.icon-bg {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
					border: 2rpx solid rgba(255, 255, 255, 0.8);
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
				}

				.card-icon {
					font-size: 40rpx;
					line-height: 1;
					filter: contrast(1.2) saturate(1.3);
				}
			}

			.card-info {
				flex: 1;
				margin-right: 20rpx;

				.card-title {
					display: block;
					font-size: 32rpx;
					color: #FFFFFF;
					font-weight: 600;
					margin-bottom: 6rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
				}

				.card-subtitle {
					font-size: 22rpx;
					color: #00B8D4;
					margin-bottom: 4rpx;
					text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
					font-weight: 500;
				}

				.card-desc {
					font-size: 20rpx;
					color: #AAB4BE;
					line-height: 1.3;
					text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
					opacity: 0.9;
				}
			}

			.card-action {
				flex-shrink: 0;

				.action-btn {
					display: flex;
					align-items: center;
					padding: 10rpx 16rpx;
					background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
					border-radius: 20rpx;
					border: 1rpx solid rgba(0, 184, 212, 0.2);
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
					transition: all 0.3s ease;

					&:active {
						transform: scale(0.95);
						box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.2);
					}

					.action-text {
						font-size: 22rpx;
						color: #1976D2;
						font-weight: 600;
					}

					.action-arrow {
						font-size: 18rpx;
						color: #00B8D4;
						font-weight: bold;
						margin-left: 6rpx;
					}
				}
			}
		}

		.primary-card {
			border: 1rpx solid rgba(0, 184, 212, 0.4);
			
			.card-glow {
				background: linear-gradient(135deg, rgba(0, 184, 212, 0.4), rgba(25, 118, 210, 0.4));
			}
			
			&:active {
				box-shadow: 0 12rpx 40rpx rgba(0, 184, 212, 0.4);
			}
		}

		.secondary-card {
			border: 1rpx solid rgba(76, 217, 100, 0.4);
			
			.card-glow {
				background: linear-gradient(135deg, rgba(76, 217, 100, 0.4), rgba(0, 184, 212, 0.4));
			}
			
			&:active {
				box-shadow: 0 12rpx 40rpx rgba(76, 217, 100, 0.4);
			}
		}

		.accent-card {
			border: 1rpx solid rgba(233, 30, 99, 0.4);
			
			.card-glow {
				background: linear-gradient(135deg, rgba(233, 30, 99, 0.4), rgba(156, 39, 176, 0.4));
			}
			
			&:active {
				box-shadow: 0 12rpx 40rpx rgba(233, 30, 99, 0.4);
			}
		}
	}
}

.service-section {
	margin: 30rpx 20rpx;
	background: linear-gradient(135deg, #1a1f2e 0%, #2a2f3e 100%);
	border-radius: 16rpx;
	overflow: hidden;
	border: 1rpx solid rgba(0, 184, 212, 0.2);

	.section-header {
		display: flex;
		align-items: center;
		padding: 25rpx 30rpx 15rpx;

		.section-title {
			font-size: 32rpx;
			color: #00B8D4;
			font-weight: bold;
			background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-shadow: 0 0 10rpx rgba(0, 184, 212, 0.3);
		}

		.title-divider {
			flex: 1;
			height: 2rpx;
			background: linear-gradient(to right, transparent, #00B8D4, transparent);
			margin-left: 20rpx;
		}
	}

	.service-list {
		.service-item {
			display: flex;
			align-items: center;
			padding: 25rpx 30rpx;
			border-bottom: 1rpx solid rgba(0, 184, 212, 0.1);
			transition: all 0.3s ease;

			&:last-child {
				border-bottom: none;
			}

			&:active {
				background: rgba(0, 184, 212, 0.05);
			}

			.service-icon {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);

				&.customer-icon {
					background: linear-gradient(135deg, #00B8D4 0%, #1976D2 100%);
				}

				&.about-icon {
					background: linear-gradient(135deg, #ff9800 0%, #f44336 100%);
				}

				&.help-icon {
					background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
				}

				.icon-text {
					font-size: 24rpx;
				}
			}

			.service-content {
				flex: 1;

				.service-text {
					display: block;
				font-size: 30rpx;
				color: #FFFFFF;
				font-weight: 500;
					margin-bottom: 5rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}

				.service-desc {
					font-size: 22rpx;
					color: #AAB4BE;
				}
		}

		.service-arrow {
				font-size: 24rpx;
				color: #00B8D4;
				font-weight: bold;
		}
	}
	}
}

.bottom-space {
	height: 60rpx;
}
</style>
